<template>
    <div>
		<!-- 头部导航栏 -->
        <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" >
					<div class="mui-scroll" >
						<a :class="['mui-control-item',item.id == 0 ? 'mui-active' : '']" v-for="item in catelists" :key="item.id" @click="getimages(item.id)">
							{{item.title}}
						</a>
					</div>
				</div>
        </div>
		<!-- 图片列表页 -->
		<div id="content">
			<ul class="img-list">
				<router-link v-for="item in imglists" :key="item.id" :to="'/home/photoinfo/' + item.id" tag="li">
					<img v-lazy="item.img_url">
					<div class="info">
						<h1 class="info-title">{{item.title}}</h1>
						<div class="info-con">
							{{item.zhaiyao}}
						</div>
					</div>
				</router-link>
			</ul>
		</div>
    </div>
</template>
<script>
import mui from "../../lib/mui/js/mui.min.js"
import {Toast} from "mint-ui"
export default{
    data(){
        return{
			catelists:'',
			imglists:''
        }
	},
	created(){
		this.getimgcategory()
		this.getimages(0)
	},
    mounted(){
        mui('.mui-scroll-wrapper').scroll({
			deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
		})
    },
    methods:{
		getimgcategory(){
			this.$http.get('api/getimgcategory').then(response=>{
				if(response.body.status == 0){
					response.body.message.unshift({ title:"全部", id:0})
					this.catelists = response.body.message
					Toast({message:"获取分类数据ok",duration:1000})
				}
				else{
					Toast({message:"获取分类数据fail",duration:1000})
				}
			})
		},
		getimages(cateid){
			this.$http.get('api/getimages/' + cateid).then(response=>{
				if(response.body.status == 0){
					this.imglists = response.body.message
					Toast({message:"获取分类图片ok",duration:1000})
				}
				else{
					Toast({message:"获取分类图片fail",duration:1000})
				}
			})
		}
	}
}
</script>
<style lang="scss" scoped>
*{
    touch-action:pan-y;
}
.mui-slider{
	background-color: #fff;
	position: fixed;
    top: 40px;
}
.img-list{
	margin:40px 0 0 0;
	padding:10px;
	padding-bottom:0;
	li{
		background-color: #999;
		margin-bottom:10px;
		position:relative;
		box-shadow: 0 0 9px #999;
		img{
			width:100%;
			vertical-align: middle;
		}
		img[lazy=loading] {
			width: 40px;
			height: 300px;
			margin: auto;
		}	
		.info{
			width:100%;
			background-color:rgba(0,0,0,0.5);
			color:#fff;
			position:absolute;
			bottom:0;
			padding:2px;
			max-height:100px;
			
			.info-title{
				font-size:16px;
			}
			.info-con{
				font-size:14px;
				max-height:60px;
				text-overflow:ellipsis;
			}
		}
	}
	
	

		
}

</style>
